<template>
  <div style=" height: 100%;">
    <div style="height: 50px;line-height: 50px;">
      <el-button size="mini" style="margin-left: 10px;" type="primary" @click="save">新增分组</el-button>
    </div>
    <!--分组选项-->
    <el-tabs v-model="testcyrrentTab" addable closable style=" height: 100%;" type="border-card" @tab-add="save"
             @tab-remove="rm">
      <template v-for="item in groups">
        <el-tab-pane :label="item.dictname" :name="item.dictcode" lazy style="height: 100%;">
          <dict-list :group="item" style=" height: 100%;"></dict-list>
        </el-tab-pane>
      </template>
    </el-tabs>

    <save-group ref="savegroup" :visible.sync="isshow" @refreshData="initData"></save-group>
  </div>
</template>

<script>
const DictList = () => import('./dictlist.vue')
const SaveGroup = () => import('./SaveGroup.vue')
export default {
  data() {
    return {
      user: {},
      groups: [],
      isshow: false,
      testcyrrentTab: ""
    }
  },
  components: {
    DictList,
    SaveGroup
  },
  created() {
    this.user = this.$session.getUser()
    this.initData()
  },
  methods: {
    rm(code) {
      this.$confirm('您确认要删除分组吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.deleteDictGroup({
          code
        })
          .then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.initData()
            }
          })
      }).catch(() => {});
    },
    save() {
      this.isshow = true
      this.$nextTick(() => {
        this.$refs.savegroup.init()
      })
    },
    initData() {
      const params = {
        "euid": this.user.euid
      };
      this.$api.queryChildDict(params)
        .then(res => {
          if (res.code === 200) {
            this.groups = res.data
            if (this.groups.length > 0) {
              this.testcyrrentTab = this.groups[0].dictcode
            }
          }
        })
    }
  }
}
</script>

<style scoped>
/deep/ .el-tabs--border-card > .el-tabs__content {
  height: 100%;
}
</style>
